<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的个人博客</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <nav>
            <div class="logo">我的博客</div>
            <ul class="nav-links">
                <li><a href="#home">首页</a></li>
                <li><a href="#articles">文章</a></li>
                <li><a href="#about">关于</a></li>
                <li><a href="#contact">联系</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section class="hero">
            <h1>欢迎来到我的博客</h1>
            <p>分享技术、生活和思考</p>
        </section>

        <section class="articles" id="articles">
            <h2>最新文章</h2>
            <div class="article-grid">
                <article class="article-card">
                    <img src="https://via.placeholder.com/300x200" alt="文章配图">
                    <div class="article-content">
                        <h3>第一篇博客文章</h3>
                        <p class="date">2024年3月21日</p>
                        <p class="excerpt">这是我的第一篇博客文章，在这里我将分享我的想法和经验...</p>
                        <a href="#" class="read-more">阅读更多</a>
                    </div>
                </article>
                <article class="article-card">
                    <img src="https://via.placeholder.com/300x200" alt="文章配图">
                    <div class="article-content">
                        <h3>第二篇博客文章</h3>
                        <p class="date">2024年3月20日</p>
                        <p class="excerpt">今天我想和大家分享一些有趣的技术见解...</p>
                        <a href="#" class="read-more">阅读更多</a>
                    </div>
                </article>
            </div>
        </section>

        <section class="about" id="about">
            <h2>关于我</h2>
            <div class="about-content">
                <img src="https://via.placeholder.com/200x200" alt="个人照片" class="profile-pic">
                <div class="about-text">
                    <p>你好！我是一名热爱技术和写作的博主。在这里，我会分享我的技术经验、生活感悟和有趣的故事。</p>
                </div>
            </div>
        </section>

        <section class="contact" id="contact">
            <h2>联系我</h2>
            <form id="contact-form">
                <div class="form-group">
                    <label for="name">姓名：</label>
                    <input type="text" id="name" name="name" required>
                </div>
                <div class="form-group">
                    <label for="email">邮箱：</label>
                    <input type="email" id="email" name="email" required>
                </div>
                <div class="form-group">
                    <label for="message">留言：</label>
                    <textarea id="message" name="message" required></textarea>
                </div>
                <button type="submit">发送消息</button>
            </form>
        </section>
    </main>

    <footer>
        <p>&copy; 2024 我的个人博客. All rights reserved.</p>
    </footer>

    <script src="script.js"></script>
</body>
</html> 